<template>
    <view>
        <view class="home_tab"> 
            <view>
                <view class="home_tab_title">
                    <view class="title_inner">
                        <uni-segmented-control 
                        :current="current" 
                        :values="items.map(v=>v.title)" 
                        @clickItem="onClickItem" 
                        style-type="text" 
                        active-color="#d4237a">
                        </uni-segmented-control>
                    </view>
                    <view class="iconfont icon-soushuo"></view>
                </view>
                
            </view>
            <view class="home_tab_content">
                <view v-if="current === 0">
                    <home-recommend />
                </view>
                <view v-if="current === 1">
                    <home-category/>
                </view>
                <view v-if="current === 2">
                    <home-new/>
                </view>
                <view v-if="current === 3">
                    <home-album />
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import homeAlbum from  "./components/homeAlbum"
import homeCategory from  "./components/homeCategory"
import homeNew from  "./components/homeNew"
import homeRecommend from  "./components/homeRecommend"
import {uniSegmentedControl} from '@dcloudio/uni-ui'

export default {
    data() {
        return {
            items: [
                {title:"推荐"},
                {title:"分类"},
                {title:"最新"},
                {title:"专辑"}
            ],
            current: 0
        }
    },
    onLoad(){
        this.request({
            url:"http://service.picasso.adesk.com/v3/homepage/vertical"
        }).then(res=>{
            console.log(res);
        })
    },
    methods: {
        onClickItem(e) {
            if (this.current !==e.currentIndex) {
                this.current = e.currentIndex;
            }
        }
    },
    components:{
       homeAlbum, 
       homeCategory,
       homeNew,
       homeRecommend,
       uniSegmentedControl
    }
}
</script>
<style lang="scss">
.home_tab {
    .home_tab_title {
        position: relative;
        .title_inner {
            width: 60%;
            margin: 0 auto;
        }
        .icon-soushuo {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right:5%;
        }
    }
}
</style>